<template>
    <view class="pageTop">
        <!-- 顶部 -->
        <view class="top-containers">
            <view class="image-containers">
                <u-swiper v-if="swiperListShow" :list="swiperList" height="339rpx" indicator indicatorMode='dot' @click="clickSwiper"></u-swiper>
                <u--image v-else :showLoading="true" :src="image" width="100%" height="339rpx" ></u--image>
            </view>
            <!-- logo -->
            <view class="top-containers-content ">
                <view class="display_flex_just">
                    <!-- <view class="image-logo">
                        <u--image :showLoading="true" :src="logo" width="337rpx" height="70rpx" @click="click">
                        </u--image>
                    </view> -->
                    <view class="login-btn" v-if="!isLogin" @tap="goToPage(0)">
                        登录
                    </view>
                </view>
            </view>
        </view>
        <!-- 魔方 -->
        <view class="pagesMain-content" v-if="type!=2">
            <view class="top-bar">
                <!-- 登录信息 -->
                <view class="login-info" v-if="isShowUserInfo">
                    <view class="display_flex_bet">
                        <view class="display_flex">
                            <u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="36rpx"
                                height="36rpx"></u--image>
                            <view class="info-name">
                                张老师
                            </view>
                            <view class="info-num">
                                顾客编号：213651
                            </view>

                        </view>
                        <view class="display_flex">
                            <view class="info-btn" @tap="goToPage(1)">
                                我的顾客码
                            </view>
                            <view class="info-btn" @tap="goToPage(2)">
                                我的问卷
                            </view>
                        </view>
                    </view>

                </view>
               <!-- <view class="top-bar-list">
                    <u-grid :border="false" col="4">
                        <u-grid-item v-for="(listItem,listIndex) in listArr" :key="listIndex"
                            @tap="gridEvent(listItem,listIndex)">
                            <u--image :src="listItem.icon" width="80rpx" height="80rpx"></u--image>
                            <text class="grid-text">{{listItem.text}}</text>
                        </u-grid-item>
                    </u-grid>
                </view> -->
            </view>
        </view>


    </view>
</template>

<script>
    import storage from '@/common/storage'
    export default {
        name: 'pageTop',
        props: {
            type: {
                type: String, // 1 ‘首页   2我的顾客码  3 预约页面
                default: '1'
            },
            isLogin: { //是否登录
                type: [Boolean, String],
                default: false
            },
            isShowUserInfo: { //是否展示用户信息
                type: [Boolean, String],
                default: false
            },
            isShowList: { //是否展示切换tab
                type: [Boolean, String],
                default: true
            },
            listIndexOf: {
                type: Number, // 1 ‘首页   2我的顾客码  3 预约页面
                default: -1
            }
        },
        data() {
            return {
                userInfo: {}, //用户信息
                image: '/static/images/banner/banner.png',
                logo: '/static/images/showImg/logo.png',
                listArr: [{
                    icon: '/static/images/showImg/treatAppoint.png',
                    text: '治疗预约'
                }, {
                    icon: '/static/images/showImg/remind.png',
                    text: '我的提醒'
                }, {
                    icon: '/static/images/showImg/info.png',
                    text: '我的资料'
                }, {
                    icon: '/static/images/showImg/m-2.png',
                    text: '邀请好友'
                }],
                swiperList: [],
                swiperListShow:true,
                patientHospital: {},
				jumpAddressArr:[],


            }
        },
        computed: {

        },
        watch: {

        },
        onLoad() {

        },
        created() {
            if (uni.getStorageSync('patientHospital')) {
                this.patientHospital = uni.getStorageSync('patientHospital')
                if (this.patientHospital.rotationChart) {
                    this.swiperListShow=true
                    this.swiperList = this.patientHospital.rotationChart.split(',')
					if(this.patientHospital.jumpAddress){
						this.jumpAddressArr=this.patientHospital.jumpAddress.split(',')
					}
                    this.swiperList = this.swiperList.map(item => {
                        return this.getBaseUrl(item)
                    })
                }else{
                    this.swiperListShow=false
                }

            }
        },
        mounted() {
            if (this.isShowUserInfo) {
                this.userInfo = storage.get('storage_data')
            }
            if (this.type == 1) {
                console.log("0000")
                this.listArr[3].text = '登记签到'
                this.listArr[3].icon = '/static/images/showImg/Invite.png'
            }
        },
        methods: {
			refresh(){
				if (uni.getStorageSync('patientHospital')) {
				    this.patientHospital = uni.getStorageSync('patientHospital')
				    if (this.patientHospital.rotationChart) {
				        this.swiperListShow=true
				        this.swiperList = this.patientHospital.rotationChart.split(',')
						if(this.patientHospital.jumpAddress){
							this.jumpAddressArr=this.patientHospital.jumpAddress.split(',')
						}
				        this.swiperList = this.swiperList.map(item => {
				            return this.getBaseUrl(item)
				        })
				    }else{
				        this.swiperListShow=false
				    }
				
				}
			},
			clickSwiper(e){
				if(this.jumpAddressArr[e]&&(this.jumpAddressArr[e].indexOf('http://')>-1||this.jumpAddressArr[e].indexOf('https://')>-1)){
					location.href=this.jumpAddressArr[e]
				}
			},
            // getLogo(url) {
            //     const urls = getApp().globalData.config.urls.h5Dev
            //     return urls + url
            // },
            goToPage(type) {
                if (type == 0) {
                    //this.$modal.showToast("前往登录")
                    uni.redirectTo({
                        url: "/pages/login"
                    })
                } else if (type == 1) {
                    uni.navigateTo({
                        url: '/subPackages/mine/customer/code'
                    })
                } else if (type == 2) {
                    this.$modal.showToast("问卷")
                }

            },
            gridEvent(item, index) {
                if (this.listIndexOf == index) {
                    return false
                }
                if (item.text == '治疗预约') {
                    uni.navigateTo({
                        url: '/subPackages/appointTreat/index'
                    })
                } else if (item.text == '我的提醒') {
                    uni.navigateTo({
                        url: '/subPackages/mine/customer/remind'
                    })
                } else if (item.text == '我的资料') {
                    uni.navigateTo({
                        url: '/subPackages/mine/customer/infomation?patientId=483'
                    })
                } else if (item.text == '登记签到') {
                    uni.navigateTo({
                        url: '/subPackages/remind/medicalInfo/report'
                    })
                }
                // this.$modal.showToast(item.text)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .top-containers {
        position: relative;

        .top-containers-content {
            position: absolute;
            width: 100%;
            top: 43rpx;
            padding-left: 38rpx;
            padding-right: 26rpx;

            .login-btn {
                width: 102rpx;
                height: 50rpx;
                background: $uni-color-main;
                color: $uni-text-color-inverse;
                border-radius: 8rpx;
                text-align: center;
                line-height: 50rpx;
                font-size: 24rpx;
            }
        }
    }


    .pagesMain-content {
        padding: 0 22rpx;
        margin-top: -90rpx;
        position: relative;
        z-index: 3;

        .top-bar {
            background: $uni-bg-color;
            border-radius: 8rpx;
            overflow: hidden;

            .login-info {
                padding: 24rpx;
                background: $uni-bg-second-color;
                border-top-left-radius: 8rpx;
                border-top-right-radius: 8rpx;

                .info-name {
                    margin-left: 10rpx;
                    color: $uni-text-color;
                }

                .info-num {
                    font-size: 18rpx;
                    margin-left: 16rpx;
                    color: $uni-text-color-grey1;
                }

                .info-btn {
                    padding: 0 10rpx;
                    height: 50rpx;
                    background: $uni-color-main;
                    color: $uni-text-color-inverse;
                    border-radius: 8rpx;
                    text-align: center;
                    line-height: 50rpx;
                    font-size: 24rpx;
                    margin-right: 30rpx;
                }

                .info-btn:last-child {
                    margin-right: 0rpx;
                }
            }

            .top-bar-list {
                padding: 34rpx 0rpx;

                .grid-text {
                    line-height: 50rpx;
                    font-size: 24rpx;
                    color: $uni-text-color;
                }
            }

        }
    }
</style>
